<template>
  <view class="left-side" :style="visible ? 'left:0;opacity:1;' : 'left: -100%;opacity:0;'">
    <view class="side-mask" @click="handleClickMask" @touchmove.stop.prevent="moveScroll"></view>

    <view class="side-content">
      <view class="title">
        {{ title }}
        <text v-if="count > 0">({{ count }})</text>
      </view>
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: {
      default: false,
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      required: true,
      default: '标题'
    },
    count: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {}
  },
  watch: {},
  methods: {
    handleClickMask() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss">
.left-side {
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  top: 0%;
  left: 0%;
  z-index: 99;
  transition: 0.6s ease-in-out;

  .side-mask {
    width: 100vw;
    height: 100vh;
    display: block;
    position: absolute;
    top: 0%;
    left: 0%;
    // transition: none;
    // position: fixed;
    // top: 0%;
    // left: 0%;
    z-index: -1;
  }

  .side-content {
    width: 550upx;
    height: calc(100vh - 100upx);
    background-color: #fff;
    transition: 0.6s ease-in-out;
    box-shadow: $def-shadow;
    padding: 10upx;
    box-sizing: border-box;
    color: $uni-color-paragraph;
    overflow-y: scroll;

    .title {
      padding: 10upx 0;
      text-align: center;
      font-size: 40upx;
      letter-spacing: 10upx;
      color: $uni-color-title;

      text {
        letter-spacing: normal;
        font-size: 25upx;
      }
    }
  }
}
</style>
